import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { useCallback } from "react";

const ParticleBackground = ({ children }) => {
    const particlesInit = useCallback(async (engine) => {
        // here we initialize the particles animation
        await loadFull(engine);
        }, []);
  const config = {
    fullScreen: {
    zIndex: 1,
    },
    background: {
    color: "#000",
    },
    emitters: {
    position: {
    x: 50,
    y: 100,
    },
    rate: {
    quantity: 5,
    delay: 0.15,
    },
    },
    particles: {
    color: {
    value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"],
    },
    move: {
    decay: 0.05,
    direction: "top",
    enable: true,
    gravity: {
    enable: true,
    },
    outModes: {
    top: "none",
    default: "destroy",
    },
    speed: {
    min: 50,
    max: 100,
    },
    },
    number: {
    value: 0,
    },
    opacity: {
    value: 1,
    },
    rotate: {
    value: {
    min: 0,
    max: 360,
    },
    direction: "random",
    animation: {
    enable: true,
    speed: 30,
    },
    },
    tilt: {
    direction: "random",
    enable: true,
    value: {
    min: 0,
    max: 360,
    },
    animation: {
    enable: true,
    speed: 30,
    },
    },
    size: {
    value: 10,
    animation: {
    enable: true,
    startValue: "min",
    count: 1,
    speed: 16,
    sync: true,
    },
    },
    shape: {
    type: ["circle", "square"],
    options: {},
    },
    },
    };
  return (
    <Particles options={config} init={particlesInit} />
  );
};

export default ParticleBackground;